<template>
  <div>
    <div :class="addSta ? 'job-filtrate-list' :'job-filtrate-list job-filtrate-listed'">
      <el-row>
        <el-col :span="2" class="filtrate-list-title">{{title}}</el-col>
        <el-col :span="20" class="filtrate-button-text">
          <el-button :class="activeindex == 0 ? 'button-checked' : ''" @click="doClick('')">不限</el-button>
          <el-button
            v-for="item in city" :key="item"
            @click="doClick(item)"
            :class="activeindex == item ? 'button-checked' : ''"
          >{{item}}</el-button>
        </el-col>
        <el-col @click.native="doMore" :span="2" class="filtrate-list-more">
          更多
          <i v-if="addSta" class="el-icon-arrow-right"></i>
          <i v-if="!addSta" class="el-icon-arrow-down"></i>
        </el-col>
      </el-row>
    </div>
    <el-dialog class="job-city-dialog" :visible.sync="dialogVisible" title="请选择城市">
      <div class="job-city-dialog-content">
        <el-row class="content-item">
          <el-col :span="5" class="content-item-left">热门城市</el-col>
          <el-col :span="19">
            <el-button
              :class="activeindex == item.content ? 'content-item-button content-item-buttone-checked' : 'content-item-button '"
              type="text"
              v-for="(item, index) in data"
              :key="index"
              @click="doClick(item.content)"
            >{{item.content}}</el-button>
          </el-col>
        </el-row>
        <el-row v-for="(item,index) in staticCity" :key="index" class="content-item">
          <el-col :span="5" class="content-item-left">{{item.label}}</el-col>
          <el-col :span="19">
            <el-button
              :class="activeindex == items.label ? 'content-item-button content-item-buttone-checked' : 'content-item-button'"
              type="text"
              v-for="items in item.children"
              @click="doClicks(items.label)"
            >{{items.label}}</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { chinaOptions } from '@/assets/utils/china.js'
import { setTimeout } from 'timers'
export default {
  props: ['title', 'data'],
  data() {
    return {
      activeindex: 0,
      activeName: '',
      secondIndex: -1,
      addSta: true,
      secondLicense: [],
      staticCity: chinaOptions,
      dialogVisible: false,
      citys: [],
      cityChecked: ''
    }
  },
  computed: {
    city() {
      if (this.data.length > 0) {
        let initCity = []
        for (let i = 0; i < 8; i++) {
          initCity.push(this.data[i].content)
        }
        if (this.cityChecked != '') {
          initCity.push(this.cityChecked)
        }
        initCity = _g.unique5(initCity)

        return initCity
      } else {
        return []
      }
    }
  },
  methods: {
    doClick(val) {
      this.activeindex = val
      this.activeName = ''
      this.dialogVisible = false
      this.$emit('input', val)
      this.cityChecked = val
      this.$parent.doSearch();
    },
    doClicks(val) {
      this.activeindex = val
      this.activeName = val
      this.dialogVisible = false
      this.$emit('input', val)
      this.cityChecked = val
      this.$parent.doSearch();
    },
    doMore() {
      this.dialogVisible = true
    }
  },
  mounted() {},

  components: {}
}
</script>

<style lang="scss" scoped>
.license-checked {
  color: #f09338 !important;
}
.second-license {
  margin: 10px 30px;
  padding: 19px 0;
  width: 840px;
  height: auto;
  background: #f7f7f7;
  border-radius: 5px;
  .second-button {
    margin: 0 0 0 30px;
    padding: 7px 5px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    border-radius: 0;
  }
  .second-button-checked {
    background: #f09338;
    color: #fff;
  }
}
</style>
